<template>
	<view class="meeting-container">
		<!-- 顶部导航栏 -->
		<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="header-content">
				<view class="back-btn" @click="navigateBack">
					<uni-icons type="back" size="24" color="#ffffff"></uni-icons>
				</view>
				<view class="header-title">我的会议</view>
			</view>
		</view>

		<!-- 会议列表 -->
		<view class="meeting-list">
			<view v-if="loading" class="loading">
				<uni-load-more status="loading" />
			</view>
			<view v-else-if="!meetingList || meetingList.length === 0" class="empty-tip">
				<image src="/static/images/empty.png" mode="aspectFit"></image>
				<text>暂无会议安排</text>
			</view>
			<view v-else class="meeting-cards">
				<view v-for="(item, index) in meetingList" :key="index" class="meeting-card">
					<view class="card-left">
						<view class="meeting-date">{{item.meetingDate}}</view>
						<view class="meeting-time">{{}}</view>
						<view class="meeting-title">{{item.meetingTheme}}</view>
						<view class="meeting-address">
							<uni-icons type="location" size="14" color="#666"></uni-icons>
							<text>{{item.meetingPlace}}</text>
						</view>
					</view>
					<view class="card-right">
						<view :class="['status-tag', getStatusClass(item.meetingStatus)]">
							{{getStatusText(item.meetingStatus)}}
						</view>
						<view class="action-buttons">
							<button class="action-btn" @click="showMeetingUsers(index)">查看与会人员</button>
							<button v-if="item.meetingStatus === 2 && item.filePath" class="action-btn download-btn" @click="downloadFile(item.filePath)">
								下载会议纪要
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 与会人员弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">与会人员</text>
					<view class="close-btn" @click="closePopup">
						<uni-icons type="close" size="20" color="#666"></uni-icons>
					</view>
				</view>
				<scroll-view class="users-list" scroll-y>
					<view v-for="(user, userIndex) in currentMeetingUsers" :key="userIndex" class="user-item">
						<text class="user-name">{{user}}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { navigateBack } from '@/common/js/common';
	import { getMeetingDetail, getMeetingIdsByUserIds, userInfo } from '../../common/js/api';
	
	// 状态栏高度
	const statusBarHeight = ref(0);
	const loading = ref(true);
	const userId = uni.getStorageSync('userId');
	
	// 参会人员
	const meetingUsers = ref([]);
	
	// 会议列表数据
	const meetingList = ref([]);
	
	// 当前显示的与会人员
	const currentMeetingUsers = ref([]);
	const popup = ref(null);
	
	// 获取状态文本
	const getStatusText = (status) => {
		switch(status) {
			case 0:
				return '筹备中';
			case 1:
				return '待召开';
			case 2:
				return '已召开';
			case 3:
				return '已取消';
			default:
				return '未知状态';
		}
	};
	
	// 获取状态样式类
	const getStatusClass = (status) => {
		switch(status) {
			case 0:
				return 'status-preparing';
			case 1:
				return 'status-upcoming';
			case 2:
				return 'status-completed';
			case 3:
				return 'status-cancelled';
			default:
				return '';
		}
	};
	
	// 显示与会人员
	const showMeetingUsers = (index) => {
		currentMeetingUsers.value = meetingUsers.value[index].value;
		popup.value.open();
	};
	
	// 关闭弹窗
	const closePopup = () => {
		popup.value.close();
	};
	
	// 下载文件
	const downloadFile = (url) => {
		if (!url) {
			uni.showToast({
				title: '文件不存在',
				icon: 'none'
			});
			return;
		}
		
		uni.showLoading({
			title: '下载中...'
		});
		
		uni.downloadFile({
			url: url,
			success: (res) => {
				if (res.statusCode === 200) {
					uni.openDocument({
						filePath: res.tempFilePath,
						success: () => {
							uni.hideLoading();
						},
						fail: () => {
							uni.showToast({
								title: '打开文件失败',
								icon: 'none'
							});
							uni.hideLoading();
						}
					});
				} else {
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
					uni.hideLoading();
				}
			},
			fail: () => {
				uni.showToast({
					title: '下载失败',
					icon: 'none'
				});
				uni.hideLoading();
			}
		});
	};
	
	onLoad(async() => {
		uni.showLoading({
			title: '加载中'
		});
		
		const resp = await getMeetingIdsByUserIds(userId);
		if (resp.code == 200) {
			
			const idList = resp.data;
			for (var i = 0;i < idList.length;++i) {
				try {
					const resp_meeting = await getMeetingDetail(idList[i]);
					resp_meeting.data.meetingDate = resp_meeting.data.meetingDate.substring(0,10);
					const meetingUser = ref([]);
					for (var j = 0; j < resp_meeting.data.meetingPeople.length;++j) {
						const id = resp_meeting.data.meetingPeople[j];
						const resp_user = await userInfo(id);
						meetingUser.value.push(resp_user.name);
					}
					meetingUsers.value.push(meetingUser);
					meetingList.value.push(resp_meeting.data);
				} catch {
					
				}
				
			}
			
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			statusBarHeight.value = systemInfo.statusBarHeight || 20;
			
			// 模拟数据加载
			setTimeout(() => {
				loading.value = false;
				uni.hideLoading();
			}, 500);
		} else {
			
		}
		
		
	});
</script>

<style lang="scss" scoped>
	.meeting-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		position: relative;
		padding-bottom: 30rpx;
		
		.header {
			background-color: #ff7a45;
			height: 180rpx;
			width: 100%;
			position: relative;
			
			.header-content {
				position: relative;
				height: 100%;
				
				.back-btn {
					position: absolute;
					top: 60rpx;
					left: 20rpx;
					width: 80rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 10;
				}
				
				.header-title {
					position: absolute;
					top: 60rpx;
					left: 0;
					width: 100%;
					text-align: center;
					font-size: 36rpx;
					font-weight: bold;
					color: #ffffff;
				}
			}
		}
		
		.meeting-list {
			padding: 30rpx;
			
			.loading {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 40rpx;
			}
			
			.empty-tip {
				background: #ffffff;
				border-radius: 12rpx;
				padding: 60rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
				
				image {
					width: 160rpx;
					height: 160rpx;
					margin-bottom: 20rpx;
				}
				
				text {
					font-size: 28rpx;
					color: #999;
				}
			}
			
			.meeting-cards {
				.meeting-card {
					background: #ffffff;
					border-radius: 12rpx;
					padding: 30rpx;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
					
					.card-left {
						flex: 1;
						overflow: hidden;
						
						.meeting-date {
							font-size: 24rpx;
							color: #666;
							margin-bottom: 10rpx;
						}
						
						.meeting-time {
							font-size: 28rpx;
							color: #ff7a45;
							margin-bottom: 10rpx;
							font-weight: 500;
						}
						
						.meeting-title {
							font-size: 32rpx;
							color: #333;
							font-weight: bold;
							margin-bottom: 10rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						
						.meeting-address {
							font-size: 24rpx;
							color: #666;
							display: flex;
							align-items: center;
							
							text {
								margin-left: 8rpx;
							}
						}
					}
					
					.card-right {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						justify-content: space-between;
						padding-left: 20rpx;
						
						.status-tag {
							font-size: 24rpx;
							padding: 4rpx 16rpx;
							border-radius: 16rpx;
							margin-bottom: 10rpx;
							
							&.status-preparing {
								background-color: rgba(250, 173, 20, 0.1);
								color: #faad14;
							}
							
							&.status-upcoming {
								background-color: rgba(24, 144, 255, 0.1);
								color: #1890ff;
							}
							
							&.status-completed {
								background-color: rgba(82, 196, 26, 0.1);
								color: #52c41a;
							}
							
							&.status-cancelled {
								background-color: rgba(245, 34, 45, 0.1);
								color: #f5222d;
							}
						}
						
						.action-buttons {
							display: flex;
							flex-direction: column;
							gap: 10rpx;
							
							.action-btn {
								font-size: 26rpx;
								padding: 6rpx 24rpx;
								border-radius: 30rpx;
								background: linear-gradient(45deg, #ff7a45, #ff9c6e);
								color: #ffffff;
								box-shadow: 0 4rpx 12rpx rgba(255, 122, 69, 0.2);
								margin: 0;
								line-height: 1.8;
								
								&.download-btn {
									background: linear-gradient(45deg, #52c41a, #73d13d);
									box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.2);
								}
							}
						}
					}
				}
			}
		}
		
		.popup-content {
			background-color: #ffffff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 30rpx;
			
			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				
				.popup-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.close-btn {
					padding: 10rpx;
				}
			}
			
			.users-list {
				max-height: 60vh;
				
				.user-item {
					padding: 20rpx 0;
					border-bottom: 1px solid #f0f0f0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.user-name {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}
</style> 